<template>
  <v-swiper
    :list="swiperList"
    autoplay
    :height="height"
    width="100vw"
  />
</template>

<script setup lang="ts">
const props = defineProps<{
  landingPageData: AdLandingPageVO;
  component: LandingPageSwiperItem;
}>();

const swiperList = computed(() => {
  if (!props.component) return [];
  const list: { src: string; isVideo?: boolean }[] = [];
  if (props.component.video) {
    list.push({ src: props.component.video, isVideo: true });
  }
  list.push(...props.component.swiperList.map((item) => ({ src: item.url })));
  return list;
});

const height = computed(() => `${props.component.swiperHeight ?? 750}rpx`);
</script>
